<template>
	<view class="rf-search-bar" style="z-index:999;"  :style="[{'padding-top': StatusBar + 'px', 'color': titleTintColor}, bgColor]">
		<!-- :style="{width:merchantShow ? '100vw' : width+'px', paddingTop: merchantShow ? 0 : inputTop+'px'}" -->
		<view
			class="header"
			:style="{width:merchantShow ? '100vw' : width+'px'}"
		> 
			<view class="uni_topbar" >
					<view class="inner flexbox flex_alignc"  :class="[fixed ? 'fixed' : '']" :style="[{'height': CustomBar + 'px','color': titleTintColor}, bgColor]">
							<!-- 返回 -->
							<text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text>
							<view v-if="isBack" @tap="goBack" style="position:absolute;left:15px">
									<slot name="back"></slot>
							</view>
							<slot name="headerL"></slot>
							<!-- 标题 -->
							<!-- #ifndef MP -->
							<view class="flex1" v-if="!search && center"></view>
							<!-- #endif -->
							<view class="uni_title flex1" style="text-align: center;" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
									{{title}}
							</view>
							<view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
									<input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
							</view>
							<!-- 右侧 -->
							<view class="uni_headerRight flexbox flex_row flex_alignc" style="position:absolute;right:15px">
									<slot name="iconfont"></slot>
									<slot name="string" ></slot>
									<slot name="image"></slot>
							</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
			watch: {
					  // 监听对象具体的属性， deep就不需要设置为true了
					        statusBarH: {
					         handler (newName, oldName) {
										 console.log(newName)
														this.statusBarH = newName;
					            }
					        }

			},
        data() {
            return {
							merchantShow:0,
								statusBarH: this.StatusBar,
								customBarH: this.CustomBar,
								CustomBar: 44,
								searchValue: this.placeholder,
								appLogo: this.$mSettingConfig.appLogo,
								isOpenScan: this.$mSettingConfig.isOpenScan,
								isOpenIndexCate: this.$mSettingConfig.isOpenIndexCate,
								height: 0,
								width: 0,
								inputTop: 0,
								tabCurrentIndex: 0
            }
        },
        props: {
            isBack: { type: [Boolean, String], default: true },
            title: { type: String, default: '' },
            titleTintColor: { type: String, default: '#fff' },
            bgColor: Object,
            center: { type: [Boolean, String], default: false },
            search: { type: [Boolean, String], default: false },
            searchRadius: { type: [Boolean, String], default: false },
            fixed: { type: [Boolean, String], default: false },

        },
        computed: {
            style() {
                let _style = `height: ${this.customBarH}px;`
                return _style
            }
        },
				created() {
					let obj = {};
					// #ifdef MP-WEIXIN
					// eslint-disable-next-line
					obj = wx.getMenuButtonBoundingClientRect();
					// #endif
					uni.getSystemInfo({
						success: (res) => {
							this.width = obj.left || res.windowWidth;
							this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
							this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight );
						}
					});
				},
        methods: {
            goBack() {

                uni.navigateBack({
                       delta: 1,
                       success: () => {
						   console.log("1s")
                         // 返回成功后的回调函数
                       },
                       fail: () => {
						      console.log("2s")
                         // 返回失败后的回调函数
                       }
                     });

            }
        }
    }
</script>
<style>
	.uni_topbar{}
	.flexbox{
		padding:10px;
	 display: flex; align-items: center;justify-content: center;}
	.flex1{flex:1}
	.uni_headerRight {padding:0}

	</style>
